/*
  学习目标：React路由-动态路由及传参
## 动态路由与路由参数获取

+ 可以使用`:id`的方式来配置动态的路由参数

```js
// 可以匹配 /users/1  /users/2  /users/xxx
<Route path="/users/:id" component={Users} />
```

+ 在组件中，通过`props`可以接收到路由的参数

```js
render(){
    console.log(this.props.match.params)
}
```


*/
import React from 'react';
import { Route, Link, BrowserRouter as Router, NavLink, Switch, Redirect } from 'react-router-dom';
import './index.css';
export default class App extends React.Component {
    render() {
        return (
            <Router>
                <div>
                    <h1>app组件</h1>
                    <Header></Header>
                    <ul>
                        <li>
                            <Link to="/home">首页</Link>
                        </li>
                        <li>
                            <NavLink to="/home" activeClassName="my-active">
                                首页
                            </NavLink>
                        </li>
                        <li>
                            <NavLink to="/my" activeClassName="my-active" exact>
                                我的音乐
                            </NavLink>
                        </li>
                        <li>
                            <NavLink to="/friend" activeClassName="my-active">
                                我的朋友
                            </NavLink>
                        </li>
                    </ul>

                    <Switch>
                        <Redirect from="/" to="/home" exact></Redirect>
                        <Route path="/home" component={Home}></Route>
                        {/* 1. 改造Route的path成为动态路由 /name/:自定义属性名 */}
                        <Route path="/my/:id" component={MyMusic}></Route>
                        <Route path="/friend" component={Friend}></Route>
                    </Switch>
                </div>
            </Router>
        );
    }
}

function Home(props) {
    // console.log(49, props);
    const handleClick = () => {
        // 1. 通过props获取history，操作路由跳转
        props.history.go(-1);
    };
    return (
        <h1>
            我是首页组件
            <button onClick={handleClick}>点我调到音乐</button>
        </h1>
    );
}
function Header(props) {
    // console.log(62, props);
    // 💥没有设置路由规则的普通组件，props下没有history属性
    return <h1>我是Head而组件，我没有被设置路由</h1>;
}

function Friend(params) {
    return (
        <div>
            <h1>我是Friend</h1>
            <NavLink to="/friend/first">调到第一个朋友</NavLink>
            <br />
            <NavLink to="/friend/second">调到第二朋友</NavLink>
            <br />
            <NavLink to="/friend/third">调到第三个朋友</NavLink>
            <Switch>
                <Route path="/friend" component={FriendHome}></Route>
                <Route path="/friend/first" component={Friend1}></Route>
                <Route path="/friend/second" component={Friend2}></Route>
                <Route path="/friend/third" component={Friend3}></Route>
            </Switch>
        </div>
    );
}

function FriendHome(params) {
    return <h1>朋友首页-父子级重名路由</h1>;
}

function MyMusic(props) {
    // 2.通过props.matchs.params去接收参数对象
    console.log(props);
    console.log('props.match  ----->  ', props.match.params.id);
    return <h1>我是我的音乐件</h1>;
}

function Friend1(params) {
    return <h1>我是第一个朋友</h1>;
}
function Friend2(params) {
    return <h1>第二个朋友</h1>;
}
function Friend3(params) {
    return <h1>第三个朋友</h1>;
}